<style lang="less">
.select-process {
    .list {
        margin: -24px;
        margin-bottom: 0;
    }
    .selected-list {
        margin-left: -24px;
        margin-right: -24px;
    }
}
</style>
<template>
    <div>
        <ZkModalVue class="select-process" :title="title" :size="'xl'" :visible="visible" @cancel="handleCancel" @ok="handleOk">
            <ZkList class="list" ref="table" rowKey="vid" :type="2"  :searchs="list.searchs" :columns="list.columns" :data="list.loadData">
                <template #action="record">
                    <span>
                        <zk-btn icon="check-circle" :disabled="true" v-if="info.selectedList.find(i => i.vid == record.vid)">已添加</zk-btn>
                        <zk-btn @click="handleSelected(record)" icon="edit" v-else>添加</zk-btn>
                    </span>
                </template>
            </ZkList>
            <a-table class="selected-list" rowKey="vid" :columns="list.columns" :data-source="info.selectedList" :scroll="{ x: true }" :pagination="false">
                <template #action="record">
                    <span>
                        <zk-btn @click="handleDel(record)" icon="delete" :disabled="record.noEdit">移除</zk-btn>
                    </span>
                </template>
            </a-table>
        </ZkModalVue>
    </div>
</template>
<script>
// 选择关联项目
import ZkModalVue from '@/appBase/ZkModal.vue';
import ZkList from '@/appBase/ZkList.vue';
import { customerProjectList } from '@/api/customer';
import { DesignScopeTypeEnum, ProjectStatusTypeEnum } from './enum/enum';
import { createPageDataPromise } from '@/appBase/utils';
export default {
    name: "SelectRelationContacts",
    components: {
        ZkModalVue,
        ZkList
    },
    data() {
        return {
            title: '关联项目',
            pageLoading: false,
            visible: false,
            list: {
                searchs: [
                    { title: "项目编号", dataIndex: 'projectNo' },
                    { title: "项目名称", dataIndex: 'projectName' }
                ],
                columns: [
                    { title: "项目编号", dataIndex: "projectNo", width: '140px',maxLength: 10 },
                    { title: "项目名称", dataIndex: "projectName",maxLength: 20 },
                    { title: "委托范围", dataIndex: "designScopeStr" },
                    { title: "项目状态", dataIndex: "projectStatusStr" },
                    { title: "操作", scopedSlots: { customRender: "action" }, width: '80px', fixed: 'right',align:'center' },
                ],
                loadData: (queryParams, parameter) => {
                    const { customerIds } = this.info;
                    queryParams.customerIds = customerIds;
                    return customerProjectList(queryParams,parameter).then((result)=>{
                        result.data.forEach(item=>{
                            item.vid = item.id;
                        });
                        return result;
                    });
                }
            },
            info:{
                customerIds: [],
                selectedList: []
            }
        }
    },
    methods: {
        /**
         * 显示
         * @param {Object} param
         * @param {string} param.customerIds 客户id列表
         * @param {Array} param.selectedList? 当前选中项目
         */
        show(param) {
            if (!param) {
                throw Error('请传入参数!');
            }
            const { customerIds,selectedList } = param;
            if (!customerIds) {
                throw Error('请至少传入一个customerId');
            }
            if (customerIds.length==0) {
                throw Error('请至少传入一个customerId');
            }

            Object.assign(this.info,this.$options.data().info,{
                customerIds,
                selectedList
            });
            this.handleSelectedList();
            this._onOk = param.onOk;
            this._onCancel = param.onCancel;
            this.visible = true;
        },

        handleOk() {
            this.visible = false;
            let list = this.info.selectedList.map(i=>{
                delete i._vid;
                return i;
            });
            if (this._onOk) this._onOk(list);
        },

        handleCancel() {
            this.visible = false;
            if (this._onCancel) this._onCancel();
        },
        
        handleSelected(item) {
            this.info.selectedList.push(item);
        },

        handleDel(item) {
            const list = this.info.selectedList;
            const index = list.findIndex(i => i.vid == item.vid);
            if (index > -1) {
                list.splice(index, 1);
            }
        },
        
         /**
         * 处理传入的关联列表
         */
        async handleSelectedList(){
            const { selectedList } = this.info;
            console.log('selectedList:',selectedList);
            selectedList.forEach(i=>{
                i.vid = i.id;
            });;
        }
    }
}
</script>